<template>
    <div class="common-layout">
        <el-container>
            
        
                <div class="mainer">
                <el-carousel class="carousel" :interval="5000" arrow="hover" trigger="click" height="466px">
                    <el-carousel-item v-for="item in bannerList" :key="item.id">
                        <a :href="item.link">
                        <img :src="item.appAdvertiseUrl" alt=""/>
                    </a>
                    </el-carousel-item>
                    <div class="flex-grow" />
                </el-carousel>
                <div class="putcenter">
                <Top/>
                
                <Homemain/>
                
                <div>
                <router-view></router-view>
            </div>
                </div>
                </div>

                
       
           
        </el-container>
    </div>

</template>

<script setup lang="ts">
// import router from '../../route/index'
import Top from '../../components/top/top.vue'
import Homemain from '../../components/homemain/homemain.vue'
// import Wechat from './components/wechat/wechat.vue'
import useBannerStore from '../../store/home'
const bannerStore = useBannerStore();
// const {onMounted,ref} from 'vue';
import { watch, ref, reactive, nextTick, onMounted,onBeforeMount} from "vue";
import {reqBanner,reqInteresting,reqRecommend,reqWorkList} from '../../api/home/index.js';

// const gogo =async()=>{
 // let result= await reqBanner()
// }
let bannerList = ref<any>({});
let Recommend = ref<any>({});
onBeforeMount(async() =>{
    
    let  Recommend = await reqRecommend()
    bannerStore.$state.Recommend =Recommend.content
    Recommend.value= bannerStore.$state.Recommend 
    // console.log(Recommend.content)
    let workLists = await reqWorkList()
    workLists.$state.workList= workLists
    console.log(workLists.$state.workList)
    
})
onMounted(()=>{
   getBannerList()
})
const getBannerList =async()=>{
    let bannerListw= await reqBanner()
    console.log(bannerListw)
    bannerList.value=bannerListw
    
    
}

</script>

<style scoped>
.common-layout {
	width: 1200px;
	overflow: hidden;
}
.carousel {
	width: 1200px;
	margin: 0 auto;
}
:deep() .el-carousel__indicator--horizontal .el-carousel__button {
	width: 12px;
	height: 12px;
	margin: 12px 4px;
	background: transparent;
	border: 1px solid #ffffff;
	border-radius: 50%;
	opacity: 0.5;
}
:deep() .el-carousel__indicator--horizontal.is-active .el-carousel__button {
	width: 12px;
	height: 12px;
	margin: 12px 4px;
	background: #ffffff;
	border-radius: 50%;
	opacity: 1;
}
img {
	width: 1200px;
	height: 466px;
}
.one-line {
}
.our,
.private,
.server,
.accociate {
	width: 19.094px;
	height: 276px;
	color: #b1b5c1;
}
.our {
	padding: 0 100px 14px 210px;
	font-size: 14px;
	color: #b1b5c1;
}
.private {
	padding: 0 90px 0px;
	font-size: 14px;
	color: #b1b5c1;
}
.server {
	padding: 0 90px 0px;
	font-size: 14px;
	color: #b1b5c1;
}
.accociate {
	padding: 0 90px;
	font-size: 14px;
	color: #b1b5c1;
}
/* 阿里矢量图标 */
.icon {
	width: 24px;
	height: 26px;
	margin: 0 82px;
	fill: #b1b5c1;
}
svg {
	width: 24px;
	height: 26px;
	margin: 0 82px;
	fill: #b1b5c1;
}
.svgpic {
	padding: 28px 455px;
	overflow: hidden;
}
.ICP {
	text-align: center;
	color: #b1b5c1;
}
.premission {
	text-align: center;
	color: #b1b5c1;
}
.web {
	text-align: center;
	color: #b1b5c1;
}
.copyright {
	text-align: center;
	color: #b1b5c1;
}
.footer {
	background-color: #221f23;
}

.putcenter {
	padding: 0 auto;
}
.mainer {
	width: 1300px;
}
</style>